<template>
  <div id="layout">
    <Layout>
        <Header class="v-header">
            <span class="v-logo-txt fl" style="border:none">悠派瑞为智慧门店</span>
            <span class="v-logo-txt fl">客流数据分析</span>
            <div class="fr">
                <ButtonGroup class="mr10">
                    <Button v-if="isPreBtn" :type="active === 0 ? 'primary' : 'ghost'" @click="GetParams(0)">今天</Button>
                    <Button v-if="isPreBtn" :type="active === 1 ? 'primary' : 'ghost'" @click="GetParams(1)">昨天</Button>
                    <Button v-if="isNexBtn" :type="active === 2 ? 'primary' : 'ghost'" @click="GetParams(2)">过去7天</Button>
                    <Button v-if="isNexBtn" :type="active === 3 ? 'primary' : 'ghost'" @click="GetParams(3)">过去30天</Button>
                </ButtonGroup>
                <DatePicker v-if="isNexBtn" :options="options" class="mr10" type="daterange" placement="bottom-end" placeholder="请选择日期区间" style="width: 200px;" @on-change="GetParams(5, $event)"></DatePicker>
                <span class="v-user-name">{{ userName }}</span>
                <span class="v-login-out" @click="LoginOut">注销</span>
            </div>
        </Header>
          <Layout>
            <Sider ref="side" hide-trigger collapsible :collapsed-width="0" v-model="isCollapsed" style="text-align: left; overflow: hidden;" width="300">
              <Menu active-name="home" theme="dark" width="300px" @on-select="ToLink">
                <MenuItem name="home">
                  <span>01 <b></b> <i>总客流量</i></span>
                </MenuItem>
                <MenuItem name="sexAgeRatio">
                  <span>02 <b></b> <i>年龄/性别比例</i></span>
                </MenuItem>
                <MenuItem name="storeSexRatio">
                  <span>03 <b></b> <i>多店性别比例对比</i></span>
                </MenuItem>
                <MenuItem name="storeRushHour">
                  <span>04 <b></b> <i>客流高峰时段</i></span>
                </MenuItem>
                <MenuItem name="rushHour">
                  <span>05 <b></b> <i>客流时报表</i></span>
                </MenuItem>
              </Menu>
            </Sider>
            <div @click="collapsedSider" class="v-menu-arrow">
              <Icon :type="iconType" size="5" color="#fff"></Icon>
            </div>
            <Content class="v-content" >
              <div :style="{'min-height': minHeight + 'px'}">
                <router-view />
              </div>
              <Footer class="v-footer">版权所有：广州悠派瑞为信息技术有限公司；数据来源：悠派瑞为智慧门店 <a target="_blank" @click="DownLink">下载数据</a></Footer>
            </Content>
        </Layout>
      </Layout>
  </div>
</template>

<script>
export default {
  name: "layout",
  props: {
  },
  data () {
    return {
      active: 0,
      isCollapsed: false,
      isPreBtn: true,
      isNexBtn: true,
      options: {
        disabledDate: date => {
          return date && date.valueOf() > Date.now()
        }
      },
      linkPre: '',
      downLink: '',
      minHeight: 0,
      userName: ''
    }
  },
  computed: {
    iconType () {
      return this.isCollapsed ? 'arrow-right-b' : 'arrow-left-b'
    },
    getDownLink() {
      return this.$store.state.downLink
    }
  },
  watch:{
    getAjaxParams(val) {
      this.downLinkParams = val
    },
    getAjaxParamsArea(val) {
      this.areaParams = val
    },
    getDownLink (val) {
      this.downLink = this.linkPre + this.urlencode(val)
    },
    $route(to, from) {
      this.GetRoute(to.name)
    }
  },
  mounted() {
    let allHeight = document.documentElement.clientHeight
    this.minHeight = allHeight - 206
    const that = this;
    window.onresize = () => {
      let allHeight = document.documentElement.clientHeight
      this.minHeight = allHeight - 206
    }
  },
  created() {
    this.userName = window.localStorage.getItem('token')
    this.GetRoute(this.$route.name)
  },
  methods: {
  	GetRoute (name) {
      switch (name) {
          case 'home':
            this.isPreBtn = true
            this.isNexBtn = true
            this.GetParams(0)
            this.linkPre = '/report/exportPassengerData?'
            break;
          case 'sexAgeRatio':
            this.isPreBtn = true
            this.isNexBtn = true
            this.GetParams(0)
            this.linkPre = '/report/exportAgeSexualStoreData?'
            break;
          case 'storeSexRatio':
            this.isPreBtn = true
            this.isNexBtn = true
            this.GetParams(0)
            this.linkPre = '/report/exportSexualDate?'
            break;
          case 'rushHour':
            this.isPreBtn = false
            this.isNexBtn = true
            this.active = 2
            this.GetParams(2)
            this.linkPre = '/report/exportWeekPeakPeriodData?'
            break;
          case 'storeRushHour':
            this.isPreBtn = true
            this.isNexBtn = true
            this.GetParams(0)
            this.linkPre = '/report/exportDayPeakPeriodDatae?'
            break;
          default:
        }
    },
    urlencode (data){  
      var _result = [];
      for (var key in data){
          var value = data[key];
          if (value.constructor == Array){
              value.forEach(function(_value){
                  _result.push(key + "=" + _value);
              });
          }else{
              _result.push(key + '=' + value);
          }
      }
      return _result.join('&');
    },
    DownLink () {
      window.open(this.downLink)
    },
    collapsedSider () {
      this.$refs.side.toggleCollapse()
      this.$store.dispatch('SetSideBarWidth', this.isCollapsed)
    },
    ToLink (name) {
      this.active = 0
      this.$router.push({name: name})
    },
    GetParams (type, date) {
      this.active = type
      switch (type) {
        case 0:  // 今天
          let today = new Date()
          today.setTime(today.getTime())
          let month = today.getMonth() + 1
          month = month < 10 ? '0' + month : month
          let dateDay = today.getDate()
          dateDay = dateDay < 10 ? '0' + dateDay : dateDay
          let todayFormat = today.getFullYear() + '-' + month + '-' + dateDay
          this.$store.dispatch('SetTimeParams', {
            exactDate: todayFormat
          })
          break;
        case 1:  // 昨天
          let lastday = new Date()
          lastday.setTime(lastday.getTime() - 24*60*60*1000)
          let monthY = lastday.getMonth() + 1
          monthY = monthY < 10 ? '0' + monthY : monthY
          let dayY = lastday.getDate()
          dayY = dayY < 10 ? '0' + dayY : dayY
          let lastdayFormat = lastday.getFullYear() + '-' + monthY + '-' + dayY
          this.$store.dispatch('SetTimeParams', {
            exactDate: lastdayFormat
          })
          break;
        case 2:  // 过去7天
          this.$store.dispatch('SetTimeParams', {
            dateNum: 7
          })
          break;
        case 3:  // 过去30天
          this.$store.dispatch('SetTimeParams', {
            dateNum: 30
          })
          break;
        case 4:  // 过去90天
          this.$store.dispatch('SetTimeParams', {
            dateNum: 90
          })
          break;
        case 5:  // 日期区间
          this.$store.dispatch('SetTimeParams', {
            startDate: date[0],
            endDate: date[1]
          })
          break;
        default:
      }
    },
    LoginOut () {
      window.localStorage.removeItem('token')
      this.$store.dispatch('Logout').then((res) => {
        if (res.success === '1') {
          this.$router.push({ name: 'login' })
        }
      })
    }
  }
};
</script>

<style lang="less">
#layout {
  min-width: 1366px;
  .ivu-layout-header {
    background-color: #1d2437;
    padding: 0 15px;
  }
  .ivu-menu-dark,
  .ivu-layout-sider-children {
    background-color: #1d2437;
  }
  .ivu-layout-footer {
    color: #999;
    background-color: #ebf2ff;
  }
  .ivu-menu-item span {
    font-size: 16px;
  }
  .ivu-menu-item a {
  }
  i {
    font-style: normal;
  }
  .ivu-menu-vertical .ivu-menu-item, .ivu-menu-vertical .ivu-menu-submenu-title {
    height: 70px;
    line-height: 70px;
    padding: 0 22px;
  }
  .ivu-menu-dark.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu) i, .ivu-menu-dark.ivu-menu-vertical .ivu-menu-submenu-title-active:not(.ivu-menu-submenu) i {
    font-style: normal;
    font-size: 20px;
  }
  .ivu-menu-dark.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu) b, .ivu-menu-dark.ivu-menu-vertical .ivu-menu-submenu-title-active:not(.ivu-menu-submenu) b {
    position: relative;
    top: -5px;
    display: inline-block;
    width: 26px;
    font-size: 0;
    border-top: 1px solid #2497fc;
    margin-right: 3px;
  }
}
.fl {
  float: left;
}
.fr {
  float: right;
}
.ml10 {
  margin-left: 10px;
}
.mr10 {
  margin-right: 10px;
}
.mt28 {
  margin-top: 28px;
}
#layout {
  font-family: "微软雅黑", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}
#layout .v-header {
  height: 68px;
  img {
    display: block;
    margin-top: 8px;
  }
  .v-logo-txt {
    height: 21px;
    line-height: 18px;
    font-size: 21px;
    color: #e6e9ff;
    border-left: 1px solid #43537f;
    margin-left: 14px;
    padding-left: 14px;
    margin-top: 25px;
  }
  .ivu-btn-ghost {
    color: #9db3cc;
    border-color: #333f60;
  }
  .ivu-input {
    color: #9db3cc;
    border-color: #333f60;
    background-color: transparent;
  }
  .v-user-name {
    margin: 0 20px 0 60px;
    color: #9db3cc;
  }
  .v-login-out {
    color: #9db3cc;
    cursor: pointer;
  }
}
.v-menu-arrow {
  width: 6px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background: url('../assets/arrow_bg.png');
  margin-top: 350px;
}
.v-content {
  padding: 28px 28px 0;
  background-color: #ebf2ff;
}
#layout .v-footer {
  height: 114px;
  line-height: 66px;
  font-size: 12px;
  text-align: center;
}
.v-dropdown {
  margin-right: 20px;
  margin-top: 22px;
}
</style>
